import React, { Component, PropTypes } from 'react'
import { Modal, Icon } from 'antd-mobile'
import { TopNavHeader, SingleLine } from '../common'

export default class Transaction extends Component {
  constructor() {
    super()
    this.state = {
      toggle: false,
    }
  }
  render() {
    const { visible, onClose } = this.props
    const { toggle } = this.state
    return (
      <Modal
        animated={false}
        visible={visible}
        closable={false}
        className={`rt-transaction-modal-container`}
      >
        <TopNavHeader
          title="历史交易"
          a="abc"
          onClick={onClose}
        />
        <div className={`rt-scrollable-container`}>
          <SingleLine
            left="开仓时间"
            right={<span>04-11 15:10</span>}
          />
          <SingleLine
            left="工业银"
            right={<span>3KG</span>}
          />
          <SingleLine
            left="数量"
            right={<span>1手</span>}
          />
          <SingleLine
            left="开仓价格"
            right={<span>3127</span>}
          />
          <SingleLine
            left="开仓成本"
            right={<span>8.7(含赠金8.7元)</span>}
          />
          <SingleLine
            left="止盈"
            right={<span>20%</span>}
          />
          <SingleLine
            left="止损"
            right={<span>30%</span>}
          />
          <SingleLine
            left="持仓过夜"
            right={<span>是</span>}
          />
          {
            Array(1).fill(1).map(v => (
              <SingleLine
                key={Math.random()}
                left="持仓过夜"
                right={<span>是</span>}
              />
            ))
          }
          {/*<SingleLine
            left="表格"
            right={<div className={`rt-circle-box`}><Icon type={`${toggle ? 'up' : 'down'}`} onClick={() => this.setState({toggle: !toggle})} /></div>}
          />*/}

          <SingleLine
            className={`${toggle ? 'rt-adjust' : ''}`}
            left="表格"
            right={<div className={`rt-circle-box`}><Icon type={`${toggle ? 'up' : 'down'}`} onClick={() => this.setState({toggle: !toggle})} /></div>}
          />

          {
            toggle
            ? (
              <div className={`rt-table-box`}>
                <div className={`rt-thead-box`}>
                  <span>时间</span>
                  <span>止盈</span>
                  <span>止损</span>
                  <span>递延</span>
                </div>
                {
                  Array(14).fill(1).map(v => (
                    <div key={Math.random()} className={`rt-tbody-box`}>
                      <span>09-15 00:23</span>
                      <span>20%</span>
                      <span>30%</span>
                      <span>12元</span>
                    </div>
                  ))
                }
              </div>
            )
            : null
          }
        </div>
      </Modal>
    )
  }
}

Transaction.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
}